<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>用户管理</cite></a>
    <a><cite>用户列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_user_search">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入用户昵称或手机号">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">代理商</div>
            <div class="layui-input-inline" style="width: 150px">
              <select name="agent_id" id="agent_id">
                <option value="">全部</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">是否实名</div>
            <div class="layui-input-inline" style="width: 150px">
              <select name="real_name" id="real_name">
                <option value="">请选择</option>
                <option value="1">已实名</option>
                <option value="2">未实名</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">日期范围</div>
            <div class="layui-inline" id="date_range">
              <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.start_date || ''}}" placeholder="创建开始日期">
              </div>
              <div class="layui-input-inline">~</div>
              <div class="layui-input-inline">
                <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.end_date || ''}}" placeholder="创建结束日期">
              </div>
            </div>
          </div>

          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_user_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_user_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>

          <button type="submit" lay-submit class="layui-btn layui-btn-normal"
                  lay-filter="user_export">
            <i class="layui-icon layui-icon-export"></i>导出
          </button>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_user"></div>
      <script type="text/html" id="tpl_agent">
        {{d.agent.name}}
      </script>
      <script type="text/html" id="tpl_avatar">
        <img style="width: 35px" src="{{d.avatar_url || ''}}" layadmin-event="imagePreview">
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.status.value === 'enabled') { }}
        <span class="layui-font-green">启用</span>
        {{# } }}
        {{# if (d.status.value === 'disabled') { }}
        <span class="layui-font-red">禁用</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_real_name">
        {{# if (d.auth) { }}
        {{d.auth.real_name}}
        {{# } else { }}
        <span class="layui-font-red">未实名</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        {{# if (d.auth) { }}
        <a class="layui-table-link" lay-event="real_name">
          查看实名信息
        </a>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
  layui.use(['fox_table','laydate'], function () {
    let $ = layui.$
      , fox_table = layui.fox_table
      , admin = layui.admin
      , form = layui.form
      , view = layui.view
      , laydate = layui.laydate

    //日期时间选择器
    laydate.render({
      elem: '#date_range'
      , range: ['#start_date', '#end_date']
    });
    form.render()

    let resourceUrl = 'admin/users'

    // 列表查询
    fox_table.render({
      id: 'table_user'
      , url: resourceUrl
      , cols: [[
        {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
        , {title: '所属代理', templet: '#tpl_agent', width: 100}
        , {title: '头像', templet: '#tpl_avatar', width: 80}
        , {title: '昵称', field: 'nickname', minWidth: 100}
        , {title: '真实姓名', templet: '#tpl_real_name', width: 100}
        , {title: '手机号', field: 'mobile', width: 150}
        , {title: '注册时间', field: 'created_at', width: 180, align: "center"}
        , {title: '状态', templet: '#tpl_status', width: 80}
        , {title: '操作', width: 150, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });



    //加载代理列表
    admin.get('admin/agents?limit=1000', function (res) {
      agents = res.data
      layui.each(res.data, function (index, agent) {
        let opt = new Option(agent.name, agent.id)
        if (agent.id == layui.router().search.agent_id) {
          opt.selected = true
        }
        $('select[name="agent_id"]').append(opt)
      })
      form.render()
    })

    //监听操作栏
    fox_table.toolbar(function (obj) {
      let data = obj.data;
      if (obj.event === 'real_name') {
        showRealNameForm(data)
      }
    });

    //搜索
    form.on('submit(submit_user_search)', function (d) {
      fox_table.reload(d.field);
      return false;
    });


    // 用户导出
    form.on('submit(user_export)', function (data) {
      admin.post('admin/fontendusers/export', data.field, function (res) {
        layer.confirm('数据下载中，请到下载中心查看下载任务.', function (index) {
          layer.close(index);
          location.hash = '/ops/download';
          return false;
        });
        layer.closeAll('loading');
      }, {hasLoading: true})

      return false;
    });

    //重置
    form.on('submit(reset_user_search)', function (d) {
      $("input[name='keyword']").val('');
      $('select[name="agent_id"]').val('');
      form.render()
      fox_table.reload({});
      return false;
    });

      function showRealNameForm(data) {
      let minWidth = '600px';
      let minHeight = '700px';
      admin.popup({
        title: '实名信息'
        , area: [minWidth, minHeight]
        , id: 'popup_user_real_name'
        , success: function (layero, index) {
          view(this.id).render('/user/real_name', data.auth).done(function () {
            form.on('submit(submit_del_auth)', function (d) {
              layer.confirm('确认删除该用户的实名信息?', function (index2) {
                admin.post('admin/users/' + data.id + '/del_auth', {}, function (res) {
                  layer.closeAll();
                  fox_table.reload(); //重载表格
                })
              });
            })
          })
        }
      })
    }

  })
  }
</script>

